Contact us Page using HTML, CSS only - Source Code
Download Contact Us form source code for free
Welcome, Today in this post i created a complete fully reponsive contact us form using HTML and CSS.
And i throught i should provide you the access of this projects. And I hope it will help you. You can simply download this contact us form source code below
So to download the source code for contact us form follow the below steps and look for the functionalites tht we made in this project. And then you can simply download the source code and you can use it for your project. Thanks me later.
Functionalities that we given in this project are :-
1. In the first step we created a simple contact us form Skeleton in HTML with the required fields like Name, E-Mail, Phone Number, Your Messgae
2. And then we applied some CSS to make our form beautiful and responsive
3. And in next step we added validation to our contact form with the help of web3forms
Copy and paste the below codes to your HTML CSS files
- 1. Copy and paste the below code to your HTML file just after starting of the <body> and before the ending of the </body>
In this HTML code we created a simple form usiong form tag and applied the security key to validate our contact us form, it means when the user fills your contact form then his all the filled details will be forwarded to you Gmail id at which gamil if you want to receive
The fileds we created:- 1. Name, 2. Email, 3. Your Messge. And if you want to add more fileds like Phone Number, Gender and anything you want you san simply add them like we added name, email fields.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact me</title>
<link rel="shortcut icon" href="your website logo" type="image/x-icon">
</head>
<body>
<form action="https://api.web3forms.com/submit" method="POST">
<div class="form-content">
<Legend>Contact Us</Legend>
<input type="hidden" name="access_key" value="Your Access Key">
<input type="hidden" name="redirect" value="contact-thankyou-page">
<input type="hidden" name="subject" value="Hey Sahil New feedback for your website">
<div class="name">
<input type="text" name="name" placeholder="Your Name" required>
</div>
<div class="email">
<input type="email" name="email" placeholder="your email" required >
</div>
<div class="msg">
<input type="text" name="Message" placeholder="Your Messgae">
</div>
<button type="submit">Submit</button>
</div>
</form>
</body>
</html>
In this CSS code we given style to our contact form, also added some responsive functionality for better user experience.
You can style your CSS accordingly, its up to you, to which element you want to give, you can simply analyze the HTML code and then can access all the elements to CSS file. But if you copy and paste the below CSS code then also the beautiful contact form will create, Just copy and paste it as you did for HTML.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
form{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
padding: 40px 60px;
background-color: skyblue;
}
.form-content{
background-color: white;
text-align: center;
box-shadow: 0px 0px 3px black;
border-radius: 10px;
padding: 10px 40px;
}
legend{
margin-top: 20px;
font-size: 30px;
}
::placeholder{
font-size: 20px;
}
.name, .email, .msg{
margin-top: 10px;
}
.name{
margin-top: 20px;
}
.name input{
width: 100%;
height: 50px;
border: none;
border-bottom: 1px solid black;
outline: none;
background: transparent;
font-size: 20px;
}
.email{
margin-top: 20px;
}
.email input{
width: 100%;
height: 50px;
border: none;
border-bottom: 1px solid black;
outline: none;
background: transparent;
font-size: 20px;
}
.msg{
margin-top: 20px;
}
.msg input{
width: 100%;
height: 50px;
border: none;
border-bottom: 1px solid black;
outline: none;
background: transparent;
font-size: 20px;
}
button{
border: none;
outline: none;
font-size: 20px;
background-color: transparent;
cursor: pointer;
padding: 10px 20px;
border: 1px solid black;
margin-bottom: 20px;
margin-top: 20px;
}
button:hover{
background-color: black;
color: white;
}
@media (max-width: 768px) {
.form-content{
width: 100%;
}
.form-content .name, .email, .msg{
min-width: 100%;
}
}
@media (max-width: 425px) {
form{
padding: 10px 0px;
}
}
Now as you have created a contact us form using the above source code now we have to implement backend functionality to receive the contact form data when user submits the form.
So for this we will use Web3forms. Click on the web3forms link and enter your email, you have to enter the mail in which you want to receive the users data when they submits, so after adding you email click on the Create access key. now after this you will receive a email from web3forms, in that email you can find your Access key.
Now paste the access key to your HTML file in Your Access Key of input tag → <input type="hidden" name="access_key" value="Your Access Key">
A brief explanation about Contact Us form
In this project we created a complete responsive and fully functional contact us form just with the help of HTML and CSS.
Once you copy and paste the above source code to your HTML CSS files then you can also modify the complete contact us form. There are many fileds you can add if you want like Phone Number, Gender, Class/ Qualifications, Any other things which you want to add anything you can add in your contact us form. Suppose if you want to add phone number field in this contact us form then just copy this code → <input type="text" name="Phone Number" placeholder="Your Ph. Number" required> and your phone number filed will be added in your contact us form successfully.
About Web3Forms -
Web3Forms allows you to receive your html contact form submissions directly in your email inbox using contact form api service without any server or backend code, and the best part of Web3Forms is it's completely free, no charges you have to give to anyone for this.
Simply just generate the access_key by filling out your email in which email to want to receive that email you have to register, and then just copy the access_key and paste it in your html contact us form access_key field.
People also ask -
How do I make a working contact us page in HTML?
How to make a responsive contact page?
What is the HTML code to display contact details?
How to put contact number in HTML?
Responsive contact us page html code with source code
How to make a responsive contact us page in HTML?